<template>
    <!-- 子组件可以使用插值语法接收并展示父组件传递过来的属性 -->
    <!-- <h1>{{ list }}</h1> -->

    <!-- 
        列表标签
            无序列表：ul
            有序列表：ol
            列表项：li
    -->
    
    <ul>
        <li v-for="p in list" :key="p.id">姓名：{{ p.name }}，年龄：{{ p.age }}</li>
    </ul>

    
</template>

<!-- 子组件 -->
<script setup lang="ts" name="Person">
import { defineProps } from 'vue';
//@符号，是一个路径的别名，通过vite构建工具的配置来定义，@位置代表src目录
import {type PersonList } from '@/types/Person';
    /*
        defineProps()函数，用来接收父组件中传递过来的数据
        defineProps()函数的参数要么是数组，要么是对象
    */
   //解构对象
   //defineProps(['a'])函数返回的是一个代理对象
   //代理对象里面包含着一个从父组件传递过来的a属性
   //我们可以定义一个解构对象来解构代理对象
    //let {a}=defineProps(['a','b','sex'])
    //console.log(a);
    //直接使用对象里的a属性
    //console.log(a);
    //1、如果这样接收，那么就是只接收list这个属性。其他属性不接收
    //defineProps(['list'])
    
    //2、限制子组件接收的父组件的属性类型
    //const props=defineProps<{list:PersonList}>()
    //
    //
    /*
        3、我们为它提供一个默认值，让父组件在没有传递props的情况下，子组件依然可以正常工作
        withDefaults()函数：提供默认值，该函数有两个参数
        参数1：是准备接收父组件的props
        参数2：是如果父组件没有传递props，子组件默认的操作对象
    */
    const props=withDefaults(defineProps<{list:PersonList}>(),{
        list:()=>{
            return [
                {id:'j10066',name:'我是子组件默认值',age:25}
            ]
        }
    })


    console.log(props);



</script>

<style scoped>

</style>
